<script setup>
import axios from 'axios'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'




const emit = defineEmits(['register'])
const router = useRouter()


const account = ref('')
const password = ref('')
// 表单数据对象
const form = reactive({
  account: account.value,
  password: password.value
})

// 表单验证规则
const rules = reactive({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 24, message: '密码长度为6-24位', trigger: 'blur' }
  ]
})


// 跳转到注册
const goToRegister = () => {
  emit('register')
}

// 处理登录
const handleLogin = () => {
  axios.post('https://hmajax.itheima.net/api/login', {
    account: account.value,
    password: password.value
  }).then(res => {
    console.log('登录成功', res)
    router.push('/')
  }).catch(err => {
    console.error('登录失败', err)
  })
}
</script>

<template>
  <div class="login-box">
    <h1 :style="{ color: '#95eb82' }">智慧农场数据监控平台</h1>

    <el-form :span="10" class="loginForm" :rules="rules":model="form">
      <el-row>
        <h2>您好！欢迎登录</h2>
      </el-row>
      <!-- <el-row>
        <h2>智慧农场数据监控平台</h2>
      </el-row> -->
      <el-row>
        <input class="inputBox" type="text" placeholder="请输入账号" v-model="form.account" prop="username">
      </el-row>

      <el-row>
        <input class="inputBox" type="password" placeholder="请输入密码" v-model="form.password" prop="password">
      </el-row>

      <el-row>
        <button class="inputLogin" type="button" @click="handleLogin">登录</button></el-row>
      <el-row>
        <p>没有账号？<span @click="goToRegister" :style="{ color: '#95eb82', cursor: 'pointer' }">立即注册</span></p>
      </el-row>
    </el-form>
  </div>
</template>



<style scoped lang="less">
.login-box {
  width: 1000px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  //添加阴影
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.711);
  padding: 20px;
  background-image: url('@/assets/images/loginBackground.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  // clip-path: polygon(0 0, 100% 100%, 0 100%); // 裁剪形状 左上角为起点，右下角为终点


  .loginForm {
    right: 0;
    position: absolute;
    top: 50%;
    color: #fff;
    transform: translateY(-50%); // 居中
    width: 500px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;

    padding: 20px;


  }

  .inputBox {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #fff;
    color: #000000;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; // 过渡效果

    &:hover {
      background-color: rgba(255, 0.8);
      cursor: pointer;
    }
  }

  .inputLogin {
    margin: 10px auto;
    width: 100%;
    height: 40px;
    background-color: #95eb82;
    text-align: center;

  }


}
</style>